<template>
  <j-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-row>

          <a-col v-show="disableSubmit" :xs="24" :sm="12">
            <a-form-item label="付款编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['payablesNo', validatorRules.payablesNo]" :disabled="disableSubmit" placeholder="请输入付款编号"></a-input>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item label="合同信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag :async="true"  v-decorator="['leaseContractId', validatorRules.leaseContractId]" :disabled="disableSubmit" @change="changeLease" dict="zcgl_lease_contract_info,contract_num,id" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" v-if="!isReadOnly" :sm="12">
            <a-form-item label="资产信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag :async="true"  v-decorator="['assetId', validatorRules.assetId]"
                                   :disabled="disableSubmit"
                                   @change="selectSub"
                                   dict="zcgl_asset_info,asset_name,id" />
            </a-form-item>
          </a-col>

          <a-col v-if="!isReadOnly" :xs="24" :sm="12">
            <a-form-item label="资产明细" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag
                :trigger-change="true"
                v-decorator="['assetSubIds', validatorRules.assetSubIds]"
                :dictOptions="searchOptions"
                :disabled="disableSubmit"
                placeholder="请选择资产明细"/>
            </a-form-item>
          </a-col>

          <a-col v-if="!isReadOnly" :xs="24" :sm="12">
            <a-form-item label="客户信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag :async="true"  v-decorator="['customerId', validatorRules.customerId]" :disabled="disableSubmit || isReadOnly" dict="zcgl_customer_info,name,id" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item label="所属公司" v-is-group :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-company-select-tag placeholder="请选择所属公司" v-decorator="[ 'companyId', validatorRules.companyId]" :disabled="disableSubmit" :trigger-change="true"/>
            </a-form-item>
          </a-col>

          <a-col v-show="disableSubmit" :xs="24" :sm="12">
            <a-form-item label="付款金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['totalMoney', validatorRules.totalMoney]" :disabled="disableSubmit" placeholder="请输入付款金额" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col v-show="disableSubmit" :xs="24" :sm="12">
            <a-form-item label="付款状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['payStatus', validatorRules.payStatus]" :disabled="disableSubmit" :trigger-change="true" dictCode="payment_status" placeholder="请选择付款状态"/>
            </a-form-item>
          </a-col>
          <a-col v-show="disableSubmit" :xs="24" :sm="12">
            <a-form-item label="付款方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['paymentType']" :trigger-change="true" :disabled="disableSubmit" dictCode="pay_type" placeholder="请选择付款方式"/>
            </a-form-item>
          </a-col>
          <a-col v-show="disableSubmit" :xs="24" :sm="12">
            <a-form-item label="付款日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择付款日期" v-decorator="['paymentDate']" :disabled="disableSubmit" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>

          <a-col v-show="disableSubmit" :xs="24" :sm="12">
            <a-form-item label="付款人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag :async="true"  v-decorator="['paymentBy']" :disabled="disableSubmit" dict="sys_user,realname,id" />
            </a-form-item>
          </a-col>

          <a-col v-show="disableSubmit" :xs="24" :sm="12">
            <a-form-item label="收款人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.payeeBy_dictText" :disabled="disableSubmit" />
            </a-form-item>
          </a-col>

          <a-col v-show="disableSubmit" :span="24">
            <a-form-item label="付款说明" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['paymentRemark']" rows="4" :disabled="disableSubmit" placeholder="请输入付款说明"/>
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['remark']" rows="4" :disabled="disableSubmit" placeholder="请输入备注"/>
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="应付款项详情" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :disabled="disableSubmit"
            :loading="payablesDetailsTable.loading"
            :columns="payablesDetailsTable.columns"
            :dataSource="payablesDetailsTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </a-tab-pane>

      </a-tabs>

    </a-spin>
  </j-modal>
</template>

<script>

  import pick from 'lodash.pick'
  import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  import { validateDuplicateValue } from '@/utils/util'
  import JDate from '@/components/jeecg/JDate'
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
  import { AssetSubMixin } from '@/api/assetSubMixin'
  import JCompanySelectTag from '@comp/jeecg/JCompanySelectTag'
  import { ACCESS_TOKEN, IS_GROUP } from '@/store/mutation-types'

  export default {
    name: 'PayablesInfoModal',
    mixins: [JEditableTableMixin, AssetSubMixin],
    components: {
      JDate,
      JDictSelectTag,
      JCompanySelectTag,
      JSearchSelectTag,
    },
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        isReadOnly: false,
        disableSubmit: false,
        validatorRules: {
          payablesNo: {
            rules: [
              { required: false, message: '请输入付款编号!'},
            ]
          },
          leaseContractId: {
            rules: [
              { required: false, message: '请输入合同信息!'},
            ]
          },
          assetId: {
            rules: [
              { required: false, message: '请输入资产信息!'},
            ]
          },
          assetSubIds: {
            rules: [
              { required: false, message: '请输入资产明细!' }
              // { validator: this.validateCode }
            ]
          },
          customerId: {
            rules: [
              { required: true, message: '请输入客户信息!'},
            ]
          },
          // totalMoney: {
          //   rules: [
          //     { required: true, message: '请输入付款金额!'},
          //   ]
          // },
          // payStatus: {
          //   rules: [
          //     { required: true, message: '请输入付款状态!'},
          //   ]
          // },
        },
        refKeys: ['payablesDetails', ],
        tableKeys:['payablesDetails', ],
        activeKey: 'payablesDetails',
        // 应付款项详情
        payablesDetailsTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '款项说明',
              key: 'paymentInstructions',
              type: FormTypes.select,
              dictCode:"payment_instructions",
              width:"200px",
              placeholder: '请选择${title}',
              defaultValue: '',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '付款金额',
              key: 'amountMoney',
              type: FormTypes.inputNumber,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '备注',
              key: 'remark',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
          ]
        },
        url: {
          add: "/zcgl/payablesInfo/add",
          edit: "/zcgl/payablesInfo/edit",
          payablesDetails: {
            list: '/zcgl/payablesInfo/queryPayablesDetailsByMainId'
          },
        }
      }
    },
    methods: {
      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        let isGroup = sessionStorage.getItem(IS_GROUP)
        if (isGroup == 1) {
          let companyName = {
            rules: [{
              required: true, message: '请选择所属公司!'
            }]
          }
          this.validatorRules.companyId = companyName
        }
        console.log(this.model)
        if (this.model.leaseContractId) {
          this.isReadOnly = true
        } else {
          this.isReadOnly = false
        }
        this.selectSub1(this.model.assetId, this.model.assetSubIds)
        let fieldval = pick(this.model, 'companyId', 'payablesNo','leaseContractId','assetId', 'assetSubIds','customerId','totalMoney','payStatus','paymentType','paymentDate','paymentBy','paymentRemark','remark')
        this.$nextTick(() => {
          this.form.setFieldsValue(fieldval)
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.payablesDetails.list, params, this.payablesDetailsTable)
        }
      },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)
        return {
          ...main, // 展开
          payablesDetailsList: allValues.tablesValue[0].values,
        }
      },
      validateError(msg){
        this.$message.error(msg)
      },
     popupCallback(row){
       this.form.setFieldsValue(pick(row,'companyId', 'payablesNo','leaseContractId','assetId', 'assetSubIds','customerId','totalMoney','payStatus','paymentType','paymentDate','paymentBy','paymentRemark','remark'))
     },

    }
  }
</script>

<style scoped>
</style>